<template>
  <div class="expert-list-container">
    <!-- 搜索框 -->
    <div class="search-box">
      <el-input
        v-model="searchValue"
        placeholder="搜索专家姓名、职称或专业"
        clearable
        class="search-input"
        @keyup.enter.native="handleSearch">
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleSearch">
        </el-button>
      </el-input>
    </div>

    <!-- 专家列表 -->
    <div class="expert-list">
      <el-card 
        v-for="(item, index) in cgoods" 
        :key="index"
        class="expert-card"
        shadow="hover">
        
        <div class="expert-content">
          <!-- 专家头像 -->
          <el-image
            :src="$store.state.imgShowRoad + '/file/experta.png'"
            fit="cover"
            class="expert-avatar">
            <div slot="error" class="avatar-error">
              <i class="el-icon-user-solid"></i>
            </div>
          </el-image>

          <!-- 专家信息 -->
          <div class="expert-info">
            <div class="expert-name">
              <span class="name">{{ item.realName }}</span>
              <span class="position">{{ item.position }}</span>
            </div>
            
            <div class="expert-detail">
              <p>
                <i class="el-icon-office-building"></i>
                <span>{{ item.belong }}</span>
              </p>
              <p>
                <i class="el-icon-collection-tag"></i>
                <span>{{ item.profession }}</span>
              </p>
              <p>
                <i class="el-icon-phone"></i>
                <span>{{ item.phone }}</span>
              </p>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="expert-actions">
            <el-button
              type="success"
              plain
              size="small"
              @click="handleQuestion(item)"
              icon="el-icon-question">
              向我提问
            </el-button>
            <el-button
              type="primary"
              plain
              size="small"
              @click="handleAppoint(item)"
              icon="el-icon-date">
              线下预约
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: ''
    };
  },
  props: {
    cgoods: {
      type: Array,
      required: true
    },
  },
  methods: {
    detailsClick(item) {
      this.$store.commit("updateOrderId", item);
      this.$router.push("/home/details").catch((err) => err);
    },
    handleQuestion(item) {
      this.$router.push(`/home/question?id=${item.userName}`).catch((err) => err);
    },
    handleAppoint(item) {
      this.$router.push(`/home/appointment?id=${item.userName}`).catch((err) => err);
    },
    handleSearch() {
      this.$emit('handleSearch', this.searchValue);
    }
  }
};
</script>

<style lang="less" scoped>
.expert-list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  
  .search-box {
    margin-bottom: 20px;
    text-align: center;
    
    .search-input {
      width: 400px;
      
      /deep/ .el-input-group__append {
        background-color: #409EFF;
        color: white;
        border-color: #409EFF;
      }
    }
  }
  
  .expert-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
  }
  
  .expert-card {
    border-radius: 8px;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .expert-content {
      display: flex;
      padding: 15px;
      
      .expert-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 20px;
        background-color: #f5f7fa;
        
        .avatar-error {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          color: #909399;
          font-size: 30px;
        }
      }
      
      .expert-info {
        flex: 1;
        
        .expert-name {
          margin-bottom: 10px;
          
          .name {
            font-size: 18px;
            font-weight: bold;
            color: #303133;
            margin-right: 10px;
          }
          
          .position {
            font-size: 14px;
            color: #909399;
          }
        }
        
        .expert-detail {
          p {
            margin: 5px 0;
            font-size: 14px;
            color: #606266;
            
            i {
              margin-right: 8px;
              color: #409EFF;
            }
          }
        }
      }
      
      .expert-actions {
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        .el-button {
          margin: 5px 0;
          width: 100px;
        }
      }
    }
  }
}
</style>